<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>练习页面</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/content.css">
</head>

<body>
	<div class="header">
		<!--Content before waves-->
		<div class="inner-header flex">
			<h1>前端开发课堂练习集</h1>
			<i class="material-icons">view_quilt</i>
		</div>

		<!--Waves Container-->
		<div>
			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 200 28" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave"
						d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.1)" />
					<use xlink:href="#gentle-wave" x="48" y="9" fill="#fff" />
				</g>
			</svg>
		</div>
		<!--Waves end-->

	</div>
	<!--Header ends-->

	<!--workList starts-->
	<div class="workList">
		<div class="work">
			<a href="01.html">极简网页</a>
		</div>
		<div class="work">
			<a href="02.html">HTML嵌套</a>
		</div>
		<div class="work">
			<a href="03.html">全局属性</a>
		</div>
		<div class="work">
			<a href="04.html">原生JS实现拖拽</a>
		</div>
		<div class="work">
			<a href="05.html">设置元素内容是否翻译</a>
		</div>
		<div class="work">
			<a href="06.html">标题打字</a>
		</div>
		<div class="work">
			<a href="07.html">打印效果</a>
		</div>
		<div class="work">
			<a href="08.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="09.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="10.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="11.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="12.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="13.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="14.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="15.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="16.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="17.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="18.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="019.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="20.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="21.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="22.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="23.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="24.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="25.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="26.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="27.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="28.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="29.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="30.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="31.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="32.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="33.html">链接到协议</a>
		</div>
		<div class="work">
			<a href="34.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="35.html">暂时空缺</a>
		</div>
		<div class="work">
			<a href="36.html">暂时空缺</a>
		</div>
	</div>
	<!--workList ends-->
	<script src="js/index.js"></script>
</body>

</html>